<template>
  <view class="number-keyboard">
    <u-row
      gutter="5rpx"
      custom-style="width:200rpx;box-sizing:border-box"
      v-for="(item, index) in keyboards"
      :key="index"
    >
      <template v-if="item.group">
        <template v-for="(gt, gindex) in item.group" :key="gindex">
          <u-col :span="gt.span" v-if="gt.children">
            <u-row gutter="1rpx" v-for="(gitem, gindex) in gt.children" :key="gindex">
              <u-col :span="gnum.span || 4" v-for="(gnum, numindex) in gitem" :key="numindex">
                <view
                  @click="handleClick(gnum)"
                  class="num-item"
                  :style="{
                    backgroundColor: gnum.bgColor,
                    color: gnum.color || '#000',
                    height: gnum.height || 'auto',
                    opacity: gnum.disabled ? 0.5 : 1,
                  }"
                >
                  {{ gnum.name }}
                </view>
              </u-col>
            </u-row>
          </u-col>
          <u-col :span="gt.span" v-else>
            <view
              @click="handleClick(gt)"
              class="num-item"
              :style="{
                backgroundColor: gt.bgColor,
                color: gt.color || '#000',
                height: gt.height || 'auto',
                opacity: gt.disabled ? 0.5 : 1,
              }"
            >
              {{ gt.name }}
            </view>
          </u-col>
        </template>
      </template>
      <template v-else>
        <u-col v-for="(num, nindex) in item" :span="num.span || 3" :key="nindex">
          <view
            @click="handleClick(num)"
            class="num-item"
            :style="{
              backgroundColor: num.bgColor,
              color: num.color || '#000',
              height: num.height || 'auto',
              opacity: num.disabled ? 0.5 : 1,
            }"
          >
            <u-icon v-if="num.icon" :name="num.icon" bold size="20rpx"></u-icon>
            <text v-else> {{ num.name }}</text>
          </view>
        </u-col>
      </template>
    </u-row>
  </view>
</template>
<script setup>
import { reactive } from "vue";

const props = defineProps({
  confirmText: {
    type: String,
    default: "确认收款",
  },
});

// number-keyboard
const keyboards = reactive([
  [
    {
      name: "1",
      key: 1,
      type: "number",
    },
    {
      name: "2",
      key: 2,
      type: "number",
    },
    {
      name: "3",
      key: 3,
      type: "number",
    },

    {
      name: "删除",
      key: "delete",
      icon: "backspace",
      type: "func",
      bgColor: "#ffe0e0",
    },
  ],
  [
    {
      name: "4",
      key: 4,
      type: "number",
    },
    {
      name: "5",
      key: 5,
      type: "number",
    },
    {
      name: "6",
      key: 6,
      type: "number",
    },
    {
      name: "清除",
      key: "clear",
      type: "func",
      bgColor: "#efefef",
    },
  ],
  {
    type: "group",
    border: false,
    group: [
      {
        span: 9,
        children: [
          [
            {
              name: "7",
              key: 7,
              type: "number",
            },
            {
              name: "8",
              key: 8,
              type: "number",
            },
            {
              name: "9",
              key: 9,
              type: "number",
            },
          ],
          [
            {
              name: "0",
              key: 0,
              span: 8,
              type: "number",
            },
            {
              name: ".",
              key: ".",
              span: 4,
              type: "number",
            },
          ],
        ],
      },
      {
        name: props.confirmText,
        key: "ok",
        span: 3,
        type: "func",
        bgColor: "var(--kui-color-theme)",
        color: "white",
        height: "90rpx",
      },
    ],
  },
]);

const emits = defineEmits(["change"]);

const handleClick = (item) => {
  // console.log("handleClick", item);
  if (item.disabled) return;
  emits("change", item);
};

// 通过 key 设置item禁用, key可添加多个
const setItemDisable = (keys, disabled = true) => {
  // 如果是正则表达式，则直接遍历，如果是数组，则遍历数组
  if (keys instanceof RegExp) {
    traverseKeyboards(keyboards, (item) => {
      if (keys.test(item.key)) {
        item.disabled = disabled;
      }
    });
  } else {
    // 遍历 keyboards 多维数组，找到与key相同的item，设置disabled为true
    keys.map((v) => {
      // 调用遍历方法并传入回调函数
      traverseKeyboards(keyboards, (item) => {
        if (item.key === v) {
          item.disabled = disabled;
        }
      });
    });
  }
};

// 遍历 keyboards 多维数组
// 递归遍历多维数组，并调用回调函数处理每个基本项
function traverseKeyboards(keyboards, callback) {
  keyboards.forEach((item) => {
    if (Array.isArray(item)) {
      // 如果是数组，递归调用
      traverseKeyboards(item, callback);
    } else if (item.type === "group" && item.group) {
      // 如果是分组类型，继续递归分组内的children
      item.group.forEach((groupItem) => {
        if (groupItem.children) {
          traverseKeyboards(groupItem.children, callback);
        } else {
          // 处理分组内的非children项
          callback(groupItem);
        }
      });
    } else {
      // 处理基本项
      callback(item);
    }
  });
}

defineExpose({ setItemDisable });
</script>
<style lang="scss" scoped>
.number-keyboard {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
  // background-color: rgba(255, 61, 61, 0.349);

  .num-item {
    box-sizing: border-box;
    min-width: 40rpx;
    min-height: 40rpx;
    border: 1px solid #cccccc;
    border-radius: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5rpx;

    /* 换行 */
    white-space: pre-wrap; /* 保留空格和换行符 */
    word-break: break-all; /* 在必要时打破长词 */
    padding: 2rpx;
    text-align: center;

    &:active {
      background-color: var(--kui-color-theme-light);
    }
  }
}
</style>
